<template>
	<view class="" style="width: 100vw;height: 100vh">
		<!-- <view  style="min-height: 100vh"> -->
		<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
		
			<!-- <image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
			<hx-navbar title="邀请奖励" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
				transparent="auto"></hx-navbar>
			<view class="container">
				<!--<view class="my_inviter">
				<view class="inviter_title">
					我的邀请码：{{code}}
				</view>
			</view>
			<view class="my_inviter" v-if="!is_superior">
				<view class="inviter_title">
					谁推荐你的？
				</view>
				<input type="text" class="inputerr" v-model="inviteKey" placeholder-style="color:#999"
					placeholder="请输入推荐人邀请码">
				<view class="submit " @tap="setMyInvite">
					<text>立即提交</text>
				</view>
			</view> -->
				<view class="invite_gift" v-for="(item, index) in list" :key="index">
					<image src="/static/user/invite_img.png" mode="widthFix" class="invite_gift_img"></image>
					<view class="invite_right">
						邀请好友 获新版权
						<view class="invite_box">
							<text>
								邀请进度{{item.user_count}}/{{item.number}}
							</text>
							<view class="invite_btn" :style="{'color':selectColorSize,'border':borderSty}"
								@tap="show_poster" v-if="item.status == 0">
								<text>进行中</text>
							</view>
							<view class="invite_btn light" :style="{'color':selectColorSize,'border':borderSty}"
								@tap="go_get(item.id)" v-if="item.status == 1">
								<text>立即领取</text>
							</view>
							<view class="invite_btn light" :style="{'color':selectColorSize,'border':borderSty}"
								v-if="item.status == 2">
								<text>已完成</text>
							</view>
						</view>
					</view>
				</view>
				<view style="text-align: center;" v-if="list.length == 0">
					<image src="@/static/without.png" style="width:550rpx;margin: 10rpx auto " alt="" mode="widthFix">
					</image>
					<!-- 	<image src="/static/user/none_img2.png" mode="widthFix"></image> -->
				</view>
			</view>
			<uni-popup ref="rewards" type="center" :isMaskClick="false">

				<view class="rewards_box">
					<view class="rewards_title">
						恭喜获得新版权
					</view>
					<image src="/static/user/rewards_light.png" mode="widthFix" class="rewards_light"></image>
					<image :src="openItem.image" mode="aspectFill" class="reward_img"></image>
					<view class="reward_name">
						{{openItem.goods_name}}
					</view>
				</view>

				<view class="confirm_btn2 " @tap="confirm">
					确定
				</view>

			</uni-popup>
			<uni-popup ref="shareBox" type="center">
				<view class="" style="position: relative;">
					<image :src="share_img" mode="widthFix" class="share_img"></image>
					<view class="confirm" :style="selStyle" @tap="save">
						分享海报
					</view>

				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		h5Url
	} from '@/config/config.js'
	export default {
		data() {
			return {
				selStyle: {
					'--selectColorSize': this.$store.state.selectColorSize, //字体选中颜色
					'--borderSty': this.$store.state.borderSty, //边框颜色
					'--buttonBcak': this.$store.state.buttonBcak,
				},
				selectColorSize: this.$store.state.selectColorSize, //字体选中颜色
				borderSty: this.$store.state.borderSty, //边框颜色
				is_superior: true,
				inviteKey: '',
				code: '',
				number: '',
				money: '',
				list: [],
				openItem: {},
				share_img: '',
				page: 1,
				limit: 10
			}
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 500)
		},
		onNavigationBarButtonTap() {

			uni.navigateTo({
				url: 'invite'
			})
		},
		onLoad() {

		},
		methods: {
			save: function() {

				// #ifdef H5
				this.downloadIamge(this.share_img, 'image');
				// #endif

				// #ifdef MP || MP-ALIPAY || APP-PLUS || APP-PLUS-NVUE
				this.downloadImageOfMp(this.share_img)
				// #endif

			},
			show_poster: function() {
				// uni.navigateTo({
				// 	url: '/pages/user/invite/share'
				// })
				let data = {
					page: 1,
					type: 3,
					client: 1,
					token: this.$db.get('userToken')
				}
				// 2023-8-22
				data.url = h5Url + '/#/pages/share/jump';


				this.$api.share(data, res => {
					if (res.status) {
						this.share_img = res.data.url;
						this.$refs.shareBox.open()
					}
				})

			},
			//下载图片地址和图片名
			downloadIamge(imgsrc, name) {
				var image = new Image();
				// 解决跨域 Canvas 污染问题
				image.setAttribute('crossorigin', 'anonymous');
				image.onload = () => {
					var canvas = document.createElement('canvas');
					canvas.width = image.width;
					canvas.height = image.height;
					var context = canvas.getContext('2d');
					context.drawImage(image, 0, 0, image.width, image.height);
					var url = canvas.toDataURL('image/png'); //得到图片的base64编码数据
					var a = document.createElement('a'); // 生成一个a元素
					var event = new MouseEvent('click'); // 创建一个单击事件
					a.download = name || 'photo'; // 设置图片名称
					a.href = url; // 将生成的URL设置为a.href属性
					a.dispatchEvent(event); // 触发a的单击事件
				};
				image.src = imgsrc;
				this.$refs.shareBox.close()
			},
			downloadImageOfMp(image) {
				let _this = this

				// 先下载到本地
				uni.downloadFile({
					url: image,
					success(res) {
						uni.saveImageToPhotosAlbum({
							filePath: image,
							success() {
								_this.$common.successToShow('保存成功')
								_this.$refs.shareBox.close()
							},
							fail() {
								_this.$common.errorToShow('图片保存失败')
							}
						});
					},
					fail() {
						_this.$common.errorToShow('下载失败')
					}
				})
			},
			confirm: function() {
				this.$refs.rewards.close();
				this.openItem = {}
				this.get_data_list()
			},
			go_get: function(id) {
				let data = {
					id: id
				}
				this.$api.getInvite(data, res => {
					if (res.status) {
						this.$common.successToShow(res.msg);
						this.$refs.rewards.open()

						this.openItem = res.data;


					} else {
						this.$common.errorToShow(res.msg)
					}
				})

			},

			setMyInvite() {
				let data = {
					code: this.inviteKey
				}
				this.$api.setMyInvite(data, res => {
					if (res.status) {
						this.$common.successToShow('邀请码填写成功');
						this.is_superior = true;
					} else {
						this.$common.errorToShow(res.msg);
					}
				});
			},
			get_data_list: function() {
				this.hasNextPage = true;
				this.list = []
				this.page = 1;
				let data = {
					page: this.page,
					limit: this.limit
				}
				this.$api.getInviteRewards(data, res => {
					if (res.status) {
						this.list = res.data;
						this.hasNextPage = res.data.length >= this.limit
					}
				})
			},
			next_page: function() {
				if (this.hasNextPage) {
					let new_page = this.page + 1;
					let data = {
						page: new_page,
						limit: this.limit
					}
					this.$api.getInviteRewards(data, res => {
						if (res.status) {
							this.list = this.list.concat(res.data);
							this.hasNextPage = res.data.length >= this.limit;
							this.page = new_page
						}
					})
				}
			},
		},
		onReachBottom() {
			this.next_page()
		},
		onShow() {
			this.get_data_list()
			this.$api.myInvite(res => {
				this.code = res.data.code;
				this.money = res.data.money;
				this.number = res.data.number;
				this.is_superior = res.data.is_superior;
			});
		}
	}
</script>

<style lang="scss" scoped>
	.confirm {
		width: 490rpx;

		height: 86rpx;
		background: var(--buttonBcak);//$btn-bg
		border-radius: 50rpx;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
	}

	.share_img {
		width: 490rpx;
		height: 632rpx;
		margin-bottom: 40rpx;
	}
</style>
<style lang="scss" scoped>
	.submit text {
		position: relative;
	}

	.submit {
		width: 320rpx;
		height: 60rpx;
		color: #fff;
		border-radius: 10rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		background: linear-gradient(122deg, #646464 0%, #1A1A1A 100%);
	}

	.btn_bg {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;

	}

	.inputerr {
		width: 100%;
		border-bottom: 1rpx solid #999;
		font-size: 28rpx;
		color: #333;
		height: 50rpx;
		margin: 30rpx 0;

		text-align: center;
	}

	.inviter_title {
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		color: #333;

	}

	.my_inviter {
		width: 100%;

		border: 1rpx solid #E9E9E9;
		border-radius: 30rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-bottom: 30rpx;
	}

	.invite_btn text {
		position: relative;
	}

	.invite_btn {
		width: 155rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		// color:  #FE005A;
		// border: 1rpx solid #FE005A;
		//     border:var(--borderSty);

		//        color: var(--selectColorSize);
		border-radius: 24rpx;
		font-size: 24rpx;
	}

	.light {
		background: $btn-bg;
		color: #fff;
		border: none;
	}

	.red {
		color: #000;
	}

	.invite_box {
		padding-top: 18rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #000;
		font-weight: normal;
	}

	.invite_right {
		flex: 1;
		padding-left: 2rpx;
		font-size: 36rpx;
		color: #000;
		font-weight: bold;
	}

	.invite_gift_img {
		width: 148rpx;
		height: 124rpx;
	}

	.invite_gift {
		width: 100%;
		background-color: #fff;
		padding: 30rpx 20rpx 40rpx;
		border-radius: 20rpx;
		display: flex;
		// border-bottom: 1rpx solid #efefef;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.container {
		width: 100%;
		padding: 20rpx 40rpx;
	}

	page {}
</style>